<template>
	<view class="con">

		<!-- 商品信息 -->
		<view class="goods_list" v-if="list.length>0" v-for="(item,index) in list" :key="index" @click="goProduct(item.goodsId)">
			<!-- 单选按钮 -->
			<view v-if="item.flag==true" @click.stop="check(item)" class="zxbox">
				<image  src="../../static/r-icon/r7.png" mode="aspectFill"></image>
			</view>
			<view class="noselect" v-else @click.stop="check(item)"></view>

			<!-- 商品图片 -->
			<view class="productimg">
				<image style="width: 127rpx;height: 127rpx;" :src="item.imageUrl" mode="aspectFill"></image>
			</view>
			<view class="product_details">
				<view class="product_name">{{item.goodsName}}</view>
				<!-- <view class="specs">天然无香-90抽*4包</view> -->
				<view class="product_price">
					<view>
						<!-- <text>￥</text> -->
						<text class="price">{{item.goodsPrice}}积分</text>
					</view>
					<view class="updown">
						<text class="down" @click.stop="downnum(item,-1)">-</text>
						<text class="num">{{item.num}}</text>
						<text class="up" @click.stop="downnum(item,1)">+</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="list.length==0">
			<view class="emptyimg">
				<image style="width: 125rpx;" src="../../static/cart/gouwu.png" mode="widthFix"></image>
			</view>
			<view class="emptytext">
				<text>空空如也</text>
				<text></text>
			</view>
		</view>
		<!-- 底部全选结算 -->
		<view class="buttom" v-if="list.length>0">
			<view  @click="allcheck" v-if="allshow" class="zxbox">
				<image  src="../../static/r-icon/r7.png" mode="aspectFill"></image>
			</view>
			<view class="allselect" v-else @click="allcheck"></view>
			
			<view class="select_text">全选</view>
			<view class="delect" v-if="del" @click="delcar">删除</view>
			<view class="heji">
				<text class="heji_text">合计:</text>
				<text class="heji_price">{{money}}积分</text>
			</view>
			<view class="jiesuan" @click="uporder">去结算({{number}})</view>
		</view>
	</view>
</template>

<script>
	import {
		getcar
	} from "../../api/login.js"
	import {updateNum,delcart,cartorder,cartbuy} from "../../api/product.js"
	export default {
		data() {
			return {
				flag: false,
				allshow:false,
				number:0,
				num: 0,
				del: false,
				list: [],
				money:0,
				delList:[]
			}
		},
		watch: {
			//监听数组内部flag变化
		    list: {
				handler(val, oldVal){
					this.number=0
					this.money=0
					let flag=false
					this.delList=[]
					this.list.forEach(it=>{
						console.log(it.flag)
						if(it.flag==true){
							flag=true
							this.delList.push(it.id)
							this.del=true
							this.number++
							this.money=this.money+(it.goodsPrice*it.num)
						}
						
					})
					if(flag==false){
						this.del=false
					}
				},
				deep:true
		    }
		},
		onLoad() {
			
		},
		onShow() {
			if(this.Md.islogin()){
				if(this.list.length<10){
					this.num=0
					this.list=[]
				}
				this.getcat()
			}
			uni.$once('refresh',(data)=>{
				this.num=0
				this.list=[]
				this.getcat()
				uni.$off('refresh')
			})
			
		},
		onReachBottom() {
			this.getcat()
		},
		methods: {
			// 点击结算
			uporder(){
				if(this.delList.length>0){
					if(uni.getStorageSync("yunbi").gradeName==''|| uni.getStorageSync("yunbi").gradeName==undefined){
						this.msg('非会员不可购买积分产品','none')
						return
					}
					uni.navigateTo({
						url:"/pages/product/order?ids="+this.delList.join(',')+"&iscart=true&type=2"
					})
				}else{
					this.msg('未选择任何商品','none')
				}
			},
			//商品点击
			goProduct(id){
				console.log(111)
				uni.navigateTo({
					url:'/pages/product/detail?id='+id
				})
			},
			// 删除购物车
			async delcar(){
				let res=await this.get(delcart,{id:this.delList.join(",")})
				this.msg("删除成功")
				this.list=[]
				this.num=0
				this.getcat()
			},
			// 获取购物车数据
			async getcat() {
				this.num++;
				let res = await this.get(getcar, {
					pageNum: this.num,
					pageSize: 10
				})
				res.data.list.forEach(item => {
					if (this.allshow==true) {
						item.flag = true
					} else {
						item.flag = false
					}
					this.list.push(item)
				})
				console.log(this.list)
			},
			// 加减
			downnum(item,num) {
				console.log(item,num)
				item.num=item.num+num
				if(item.num==0){
					item.num=1
				}
				let data=JSON.parse(JSON.stringify(item))
				delete data.flag;
				this.transmit(data)
			},
			// 点击全选
			allcheck(){
				if(this.allshow){
					this.allshow=false
					this.list.forEach(item=>{
						item.flag=false
					})
				}else{
					this.allshow=true
					this.list.forEach(item=>{
						item.flag=true
					})
				}
			},
			// 点击单选
			check(item){
				let flag=true;
				if(item.flag){
					item.flag=false
				}else{
					item.flag=true
				}
				this.list.forEach(it=>{
					if(it.flag==false){
						flag=false
					}
				})
				if(flag){
					this.allshow=true
				}else{
					this.allshow=false
				}
			},
			//点击加减传参
			transmit(data){
				this.post(updateNum,data).then(res=>{
					console.log(res);
				})
			}
			
		},
	}
</script>

<style>
	.con{
		padding-bottom: 100rpx;
	}
	page {
		background: #F6F6F6;
	}

	.empty {
		width: 500rpx;
		height: 500rpx;
		margin: 500rpx auto;
	}

	.emptyimg {
		width: 500rpx;
		text-align: center;
	}

	.emptytext {
		width: 500rpx;
		text-align: center;
	}

	.goods_list {
		width: 690rpx;
		height: 180rpx;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.zxbox>image{
		width: 32rpx;
		height: 32rpx;
	}
	.noselect {
		width: 32rpx;
		height: 32rpx;
		border-radius: 62rpx;
		border: 1rpx solid #999999;
	}

	.productimg {
		width: 127rpx;
		height: 127rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.product_details {
		margin-left: 30rpx;
	}

	.product_name {
		width: 399rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.specs {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 18rpx;
	}

	.product_price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.price {
		font-size: 36rpx;
		font-weight: 400;
		color: #333333;
	}

	.num {
		width: 40rpx;
		/* height: 36rpx; */
		line-height: 40rpx;
		background: #F6F6F6;
		border-radius: 2rpx;
		font-size: 24rpx;
		color: #F0812D;
		text-align: center;
	}

	.down {
		font-size: 40rpx;
		line-height: 40rpx;
		margin-right: 10rpx;
	}

	.up {
		font-size: 40rpx;
		margin-left: 10rpx;
		line-height: 40rpx;
	}

	.updown {
		line-height: 40rpx;
		display: flex;
		align-items: center;
	}

	.buttom {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		/* #ifndef H5 */
		bottom: 0rpx;
		/* #endif */
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}

	.allselect {
		width: 32rpx;
		height: 32rpx;
		border-radius: 62rpx;
		border: 1rpx solid #999999;
	}

	.select_text {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 10rpx;
		margin-bottom: 5rpx;
	}

	.delect {
		width: 93rpx;
		height: 38rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 20rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: #666666;
		text-align: center;
		line-height: 38rpx;
		margin-bottom: 5rpx;
	}

	.heji {
		margin-left: 35rpx;
		font-size: 28rpx;
		margin-bottom: 8rpx;
		position: absolute;
		right: 258rpx;
	}

	.heji_text {
		color: #575757;
	}

	.heji_price {
		color: #000000;
		font-size: 32rpx;
		font-weight: bold;
	}

	.jiesuan {
		width: 192rpx;
		height: 62rpx;
		border-radius: 62rpx;
		background-color: #F18D29;
		font-size: 28rpx;
		font-weight: 300;
		color: #FFFFFF;
		line-height: 62rpx;
		text-align: center;
		margin-left: 60rpx;
		position: absolute;
		right: 30rpx;
	}
</style>
